<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>ComputerERP主页</title>
  <link rel="stylesheet" href="/static/js/layui/css/layui.css">
  <script type="text/javascript" src="/static/js/jquery/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="/static/js/layui/layui.js"></script>
  <script type="text/javascript" src="/static/js/echarts/echarts.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <!--    上方导航栏-->
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">ComputerERP</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <!--        <ul class="layui-nav layui-layout-left">-->
    <!--            &lt;!&ndash; 移动端显示 &ndash;&gt;-->
    <!--            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">-->
    <!--                <i class="layui-icon layui-icon-spread-left"></i>-->
    <!--            </li>-->

    <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>-->
    <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>-->
    <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>-->
    <!--            <li class="layui-nav-item">-->
    <!--                <a href="javascript:;">nav groups</a>-->
    <!--                <dl class="layui-nav-child">-->
    <!--                    <dd><a href="">menu 11</a></dd>-->
    <!--                    <dd><a href="">menu 22</a></dd>-->
    <!--                    <dd><a href="">menu 33</a></dd>-->
    <!--                </dl>-->
    <!--            </li>-->
    <!--        </ul>-->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a th:href="@{/main/selfinformation}">个人信息</a></dd>
          <dd><a href="">退出登录</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <!--左侧导航栏-->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item">
          <a class="" href="javascript:;">进货管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/purchase/pmanagement}">进货入库</a></dd>
            <dd><a th:href="@{/main/purchase/omanagement}">退货出库</a></dd>
            <dd><a th:href="@{/main/purchase/pmanagementorder}">进货单查询</a></dd>
            <dd><a th:href="@{/main/purchase/omanagementorder}">退货单查询</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item ">
          <a href="javascript:;">销售管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/sales/salesdelivery}">销售出库</a></dd>
            <dd><a th:href="@{/main/sales/omanagement}">客户退货</a></dd>
            <dd><a th:href="@{/main/sales/salesorder}">销售单查询</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item ">
          <a class="" href="javascript:;">库存管理</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/warehouse/damage}">商品报损/报溢</a></dd>
            <dd><a th:href="@{/main/warehouse/alarm}">库存报警</a></dd>
            <dd><a th:href="@{/main/warehouse/brimordamage}">报损报溢查询</a></dd>
            <dd><a th:href="@{/main/warehouse/querywarehouse}">当前库存查询</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a class="" href="javascript:;">统计报表</a>
          <dl class="layui-nav-child">
            <dd><a th:href="@{/main/report/business}">供应商统计报表</a></dd>
            <dd><a th:href="@{/main/report/buyCount}">商品采购统计</a></dd>
            <dd><a th:href="@{/main/report/saleCount}">商品销售统计</a></dd>
            <dd><a th:href="@{/main/report/mouthCount}">月销售统计报表</a></dd>
            <dd><a th:href="@{/main/report/yearCount}">年销售统计报表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item ">
          <a class="" th:href="@{/main/manage/manage}">系统设置</a>
        </li>
      </ul>
    </div>
  </div>
  <!--主体区域-->
  <!--    <div class="layui-body">-->
  <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
  <!--&lt;!&ndash;        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>&ndash;&gt;-->
  <!--    </div>-->
  <div class="layui-tab layui-tab-brief">
    <div class="layui-body layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div class="layui-main">
          <div id="LAY_layedit_code">
            <!-- 这里写主体内容-->
            <div class="layui-col-md6">
              <div id="buyCount" style="width: 850px;height:400px;"></div>
            </div>
            <div class="layui-col-md6">
              <div id="buyline" style="width: 850px;height:400px;"></div>
            </div>
            <div class="layui-col-md6">

            <div class="layui-col-md6">
              <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

              <div id="buysort" style="width: 600px;height:400px;"></div>
            </div>
          </div>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="" style="width: 600px;height:400px;"></div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>

<script>
  //JS
  layui.use(['element', 'layer', 'util'], function(){
    var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function(othis){
        layer.msg('展开左侧菜单的操作', {icon: 0});
      }
      ,menuRight: function(){
        layer.open({
          type: 1
          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          ,area: ['260px', '100%']
          ,offset: 'rt' //右上角
          ,anim: 5
          ,shadeClose: true
        });
      }
    });
  });
  $(function () {

    var buySort = echarts.init(document.getElementById('buysort'),'light');
    let bgColor = "#fff";
    let title = "总量";
    requestdata();
    //请求图表数据
    function requestdata(){
      $.ajax({
        url:"/main/report/login/buycount",
        type:"psot",
        datatype:"json",
        success:function (data){
          let formatNumber = function (num) {
            let reg = /(?=(\B)(\d{3})+$)/g;
            return num.toString().replace(reg, ",");
          };//货币格式
          let total = data.lna.reduce((a, b) => {
            return a + b.value * 1;
          }, 0);
          //设置图表样式
          option = {
            backgroundColor: bgColor,
            title: [
              {
                text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
                top: "center",
                left: "center",
                textStyle: {
                  rich: {
                    name: {
                      fontSize: 14,
                      fontWeight: "normal",
                      color: "#666666",
                      padding: [10, 0],
                    },
                    val: {
                      fontSize: 32,
                      fontWeight: "bold",
                      color: "#333333",
                    },
                  },
                },
              },
              {
                text: "单位：件",
                top: 20,
                left: 20,
                textStyle: {
                  fontSize: 14,
                  color: "#666666",
                  fontWeight: 400,
                },
              },
            ],
            series: [
              {
                type: "pie",
                radius: ["45%", "60%"],
                center: ["50%", "50%"],
                data: data.lna,
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    borderColor: bgColor,
                    borderWidth: 2,
                  },
                },
                labelLine: {
                  normal: {
                    length: 20,
                    length2: 120,
                    lineStyle: {
                      color: "#e6e6e6",
                    },
                  },
                },
                label: {
                  normal: {
                    formatter: (params) => {
                      return (
                              "{icon|●}{name|" +
                              params.name +
                              "}{value|" +
                              formatNumber(params.value) +
                              "}"
                      );
                    },
                    padding: [0, -100, 25, -100],
                    rich: {
                      icon: {
                        fontSize: 16,
                      },
                      name: {
                        fontSize: 14,
                        padding: [0, 10, 0, 4],
                        color: "#666666",
                      },
                      value: {
                        fontSize: 18,
                        fontWeight: "bold",
                        color: "#333333",
                      },
                    },
                  },
                },
              },
            ],
          };
          // 加载图表样式
          buySort.setOption(option);
        }
      });
    }
  });
</script>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('buyCount'),'light');
  var option = {
    backgroundColor:'#ffffff',
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '14%',
      top:'5%',
      containLabel: true
    },
    legend: {
      data: ['订单成交总金额', '实际成交总金额', '成交金额'],
      right: 10,
      top:20,
      textStyle: {
        color: "#000000"
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20
    },
    xAxis: {
      type: 'category',
      data: ['2015','2016','2017','2018','2019','2020','2021','2022'],
      axisLine: {
        lineStyle: {
          color: 'red'

        }
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: 'Microsoft YaHei'
        }
      },
    },

    yAxis: {
      grid: {
        left: '10%',
        top: '8%',
      },
      type: 'value',
      max:'120000',
      name: '电脑零件采购报表',
      nameGap: '8',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'black'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0,0,0,0.3)'
        }
      },
      axisLabel: {}
    },
    "dataZoom": [{
      "show": true,
      "height": 12,
      "xAxisIndex": [
        0
      ],
      bottom:'8%',
      "start": 40,
      "end": 80,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '50%',
      handleStyle:{
        color:"#d3dee5",

      },
      textStyle:{
        color:"#000000"},
      borderColor:"#90979c"
    }, {
      "type": "inside",
      "show": true,
      "height": 15,
      "start": 1,
      "end": 35
    }],
    series: [{
      name: '订单成交总金额',
      type: 'bar',
      barWidth: '15%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#fccb05'
          }, {
            offset: 1,
            color: '#f5804d'
          }]),
          barBorderRadius: 12,
        },
      },
      data: [4000, 40000, 30000, 30000, 30000, 40000, 40000, 40000, 30000]
    },
      {
        name: '实际成交总金额',
        type: 'bar',
        barWidth: '15%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#8bd46e'
            }, {
              offset: 1,
              color: '#09bcb7'
            }]),
            barBorderRadius: 11,
          }

        },
        data: [40000, 50000, 50000, 50000, 50000, 40000,40000, 50000, 50000]
      },
      {
        name: '成交金额',
        type: 'bar',
        barWidth: '15%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#248ff7'
            }, {
              offset: 1,
              color: '#6851f1'
            }]),
            barBorderRadius: 11,
          }
        },
        data: [40000, 60000, 70000, 70000, 100000, 40000, 40000, 60000, 70000]
      }]
  };

  var app = {
    currentIndex: -1,
  };
  setInterval(function () {
    var dataLen = option.series[0].data.length;

    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    //console.log(app.currentIndex);
    // 高亮当前图形
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: app.currentIndex,
    });
    // 显示 tooltip
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: app.currentIndex
    });


  }, 1000);

  myChart.setOption(option);
</script>
<!-- 第二个表 -->
<script>

</script>

<script>
  var myChart = echarts.init(document.getElementById('buyline'),'light');
  /*
最近本人发现了配置更简单，更容易理解，更容易修改，bug更少的写法

所以更新了原图表，这里分享给大家

不知道用以前写法的小伙伴有没有发现

1.项目中如果数据为0的话，hover的时候用以前的写法文字会将圆点盖住...

2.鼠标放上的时候，x轴Pointer文字可能会有些轻微的向上或向下的移动...

3.文字下划线和文字见的距离过小，有的时候不是很符合需求...

以下旧写法我都注释了哈，现在生效的是新写法，新写法我也解释说明了哦

*/

  /*

      这个注释建议看完代码再看哦

      1.如果axisLabel和axisPointer的margin相同，则padding[0]必须等于0

      2.实现效果axisLabel和AxisPointer的字体大小必须相同

      3.此配置实现效果axisLabel和axisPointer的margin必须相同

      其他配置同样可以实现效果，如lineHeight等

      这是我整理、删除多余相同配置项后总结出的，使用方便，便于封装复用

      适用于大多数图表的配置

      更复杂的样式还是要参考配置文档的哦???

  */
  const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
  option = {
    backgroundColor: "#fff",
    title: {
      top:'20%',
      text: "5月销售统计",
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
      },
      left: "center",
      top: "5%",
    },
    legend: {
      icon: "circle",
      top: "5%",
      right: "5%",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#556677",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        label: {
          show: true,
          backgroundColor: "#fff",
          color: "#556677",
          borderColor: "rgba(0,0,0,0)",
          shadowColor: "rgba(0,0,0,0)",
          shadowOffsetY: 0,
        },
        lineStyle: {
          width: 0,
        },
      },
      backgroundColor: "#fff",
      textStyle: {
        color: "#5c6c7c",
      },
      padding: [10, 10],
      extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
    },
    grid: {
      top: "15%",
    },
    xAxis: [
      {
        type: "category",
        data: ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
        axisLine: {
          lineStyle: {
            color: "#DCE2E8",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: "#556677",
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 10, 0],
            /*
      除了padding[0]建议必须是0之外，其他三项可随意设置

      和CSSpadding相同，[上，右，下，左]

      如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

      padding[2]的10:

      10 = 文字距下边线的距离 + 下边线的宽度

      如：UI图中文字距下边线距离为7 下边线宽度为2

      则padding: [0, 0, 9, 0]

                  */
            // 这里的margin和axisLabel的margin要一致!
            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#fff", // 0% 处的颜色
                },
                {
                  // offset: 0.9,
                  offset: 0.86,
                  /*
  0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                          */
                  color: "#fff", // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: "#33c0cd", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#33c0cd", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DCE2E8",
          },
        },
        axisLabel: {
          textStyle: {
            color: "#556677",
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "value",
        position: "right",
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#556677",
          },
          formatter: "{value}",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#DCE2E8",
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "Adidas",
        type: "line",
        data: [10, 10, 30, 12, 15, 3, 7],
        symbolSize: 1,
        symbol: "circle",
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "#9effff",
            },
            {
              offset: 1,
              color: "#9E87FF",
            },
          ]),
          shadowColor: "rgba(158,135,255, 0.3)",
          shadowBlur: 10,
          shadowOffsetY: 20,
        },
        itemStyle: {
          normal: {
            color: colorList[0],
            borderColor: colorList[0],
          },
        },
      },
      {
        name: "Nike",
        type: "line",
        data: [5, 12, 11, 14, 25, 16, 10],
        symbolSize: 1,
        symbol: "circle",
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
            {
              offset: 0,
              color: "#73DD39",
            },
            {
              offset: 1,
              color: "#73DDFF",
            },
          ]),
          shadowColor: "rgba(115,221,255, 0.3)",
          shadowBlur: 10,
          shadowOffsetY: 20,
        },
        itemStyle: {
          normal: {
            color: colorList[1],
            borderColor: colorList[1],
          },
        },
      },
      {
        name: "老北京布鞋",
        type: "line",
        data: [150, 120, 170, 140, 500, 160, 110],
        symbolSize: 1,
        yAxisIndex: 1,
        symbol: "circle",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#fe9a",
            },
            {
              offset: 1,
              color: "#fe9a8b",
            },
          ]),
          shadowColor: "rgba(254,154,139, 0.3)",
          shadowBlur: 10,
          shadowOffsetY: 20,
        },
        itemStyle: {
          normal: {
            color: colorList[2],
            borderColor: colorList[2],
          },
        },
      },
    ],
  };

  myChart.setOption(option);
</script>
</body>
</html>